<template>
  <div class="announcement" :class="{helpCenter: type==1}" :user="userCode">
    <!-- <h2 class="announceHeader">公告详情</h2> -->
    <h4 class="announceTitle">{{details.title}}</h4>
    <div class="browse" v-show="type==0">
      <span class="browseDate">{{details.updateTime}}</span>
      <span class="browseNum">浏览 {{details.pv}}</span>
    </div>
    <div class="browseDetails" v-html="details.content"></div>
    <!-- 是否有帮助 -->
    <div class="helpFeedback" v-show="type==1">
      <h6>这篇文章有帮助吗？</h6>
      <div class="btnGroup">
        <div class="btnFeed" :class="{active: isLike==1}" @click="likeArticle(articleId, 1)">
          <span class="icon-feed icon-yes"></span>是
        </div>
        <div class="btnFeed" :class="{active: isLike==0}" @click="likeArticle(articleId, 0)">
          <span class="icon-feed icon-no"></span>否
        </div>
      </div>
      <p class="feedbackNum">{{details.likeNum+details.notLikeNum}}人中有{{details.likeNum}}人觉得有帮助</p>
    </div>
  </div>
</template>

<script>
import { api } from "@/api/api";
import "lib-flexible";

export default {
  data() {
    return {
      isLogin: this.$store.state.usertoken ? true : false,
      categoryName: "",
      termsInfoInput: "",
      details: {},
      articleList: [],
      isLike: -1
    };
  },
  created() {
    this.getAnnouncementInfo(this.articleId);
  },
  computed: {
    type() {
      return this.$route.query.type;
    },
    articleId() {
      return this.$route.query.articleId;
    },
    userCode() {
      if (!this.isLogin) {
        return null;
      }
      let userCode = this.$store.state.userintro.userCode;
      this.updateLike(userCode, this.articleId);

      return userCode;
    }
  },
  methods: {
    updateLike(userCode, articleId) {
      let like = localStorage.getItem("announcement.like");
      try {
        like = JSON.parse(like) || [];
      } catch (error) {
        like = [];
      }
      let likeItem = like.filter(item => {
        return item.userCode == userCode && item.articleId == articleId;
      });

      if (likeItem.length) {
        this.isLike = likeItem[0].isLike;
      } else {
        this.isLike = -1;
      }
    },
    async likeArticle(articleId, isLike) {
      if (this.isLike != -1) return;

      let res = await api.postAnnouncementLike(articleId, {
        isLike: isLike
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        let like = localStorage.getItem("announcement.like");
        try {
          like = JSON.parse(like) || [];
        } catch (error) {
          like = [];
        }
        like.push({
          articleId: articleId,
          isLike: isLike,
          userCode: this.userCode
        });

        if (isLike == 1) {
          this.details.likeNum += 1;
        } else {
          this.details.notLikeNum += 1;
        }

        this.isLike = isLike;

        localStorage.setItem("announcement.like", JSON.stringify(like));
      } else {
        this.$layer.msg(msg);
      }
    },
    async getAnnouncementInfo(articleId) {
      let res = await api.announcementInfo(articleId);
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.details = Object.assign({}, data);
        this.categoryName = data.categoryName;
      } else {
        this.$layer.msg(msg);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.announcement {
  position: relative;
  background: #fff;
  padding: 2.9067rem 0.5333rem 1.6667rem;
  box-sizing: border-box;
  min-height: 100vh;
  &.helpCenter {
    padding: 2.9067rem 0.5333rem 4rem;
  }
  .announceHeader {
    font-size: 0.7467rem;
    font-familyA: Roboto-Medium;
    font-weight: 500;
    color: rgba(45, 57, 92, 1);
    line-height: 0.9333rem;
    margin-bottom: 0.6667rem;
    padding: 0 0.2667rem;
  }
  .announceTitle {
    font-size: 0.48rem;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(45, 57, 92, 1);
    line-height: 0.6667rem;
    margin-bottom: 0.32rem;
  }
  .browse {
    padding-bottom: 0.4533rem;
    > span {
      font-size: 0.3733rem;
      color: #8f95aa;
    }
  }
  .browseDetails {
    padding-top: 0.4rem;
    border-top: 1px solid rgba(143, 149, 170, 0.15);
    word-break: break-all;
    /deep/p {
      font-size: 0.3733rem;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(45, 57, 92, 1);
      line-height: 0.6133rem;
    }
  }
  .helpFeedback {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.6rem;
    padding: 0.3733rem 0 1.1333rem;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px -0.04rem 0.1867rem 0 rgba(5, 6, 51, 0.05);
    z-index: 9;
    h6 {
      font-size: 0.4rem;
      font-familyA: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(51, 56, 94, 1);
      line-height: 0.56rem;
      text-align: center;
    }
    .btnGroup {
      text-align: center;
      font-size: 0;
      margin: 0.2rem 0 0.0933rem;
      .btnFeed {
        display: inline-block;
        vertical-align: top;
        width: 2.2rem;
        height: 0.8rem;
        border-radius: 0.08rem;
        border: 1px solid rgba(51, 56, 94, 0.2);
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: #33385e;
        line-height: 0.8rem;
        &:nth-child(1) {
          margin-right: 0.6133rem;
        }
        &.active {
          border-color: transparent;
          background: #2D8DFE;
          color: #fff;
        }
        .icon-feed {
          display: inline-block;
          vertical-align: middle;
          width: 0.4267rem;
          height: 0.4267rem;
          margin-right: 0.2667rem;
        }
        .icon-yes {
          background: url(../../assets/images/select.png) no-repeat left center;
        }
        &.active .icon-yes {
          background: url(../../assets/images/select2.png) no-repeat left center;
        }
        .icon-no {
          background: url(../../assets/images/cancel.png) no-repeat left center;
        }
        &.active .icon-no {
          background: url(../../assets/images/cancel2.png) no-repeat left center;
        }
      }
    }
    .feedbackNum {
      font-size: 0.32rem;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 0.5);
      line-height: 0.44rem;
    }
  }
}
</style>
